<template>
    <div id="test" style="user-select: none;">
      <button @click="fangda">放大</button>
      <button @click="suoxiao">缩小</button>
      <button @click="gai" v-show="isTrue">添加</button>
      <button @click="gai" v-show="!isTrue">移动</button>
   
      <div class="content">
        <div
          :style="{
            transform: 'scale(' + num + ')',
            position: 'relative',
            width: '100%',
            height: '100%',
          }"
          @mousedown="moveMouse"
          @click="getOffect"
        >
          <div
            :class="
              'biaozhu' + index == 'biaozhu' + b_i
                ? 'biaozhu b_border'
                : 'biaozhu'
            "
            :ref="'biaozhu' + index"
            @mousedown.stop="move"
            @click="handelClick(index)"
            v-for="(item, index) in boxArry"
            :key="index"
            :style="{
              width: item.width + 'px',
              height: item.height + 'px',
              position: 'absolute',
              left: item.left + 'px',
              top: item.top + 'px',
              background: 'rgba(43,100,206,0.3)',
              border: 'none',
            }"
          >
            <div class="r_b" @mousedown="mouseMove11" v-if="b_i == index"></div>
          </div>
          <div
            :style="{
              height: biaozhuHeight + 'px',
              width: biaozhuWidth + 'px',
              top: biaozhuTop + 'px',
              left: biaozhuLeft + 'px',
              position: 'absolute',
              background: 'rgba(43,100,206,0.3)',
            }"
          ></div>
          <!--          src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3479844176,2436830052&fm=26&gp=0.jpg" -->
          <img
            style="width: 100%; height: 100%; pointer-events: none;"
            src="./404.png"
            alt=""
            @mousedown="isTrue ? null : move"
          />
        </div>
      </div>
    </div>
   </template>
   <script>
   export default {
    data() {
      return {
        num: 1,
        boxArry: [],
        isTrue: false,
        width: "",
        height: "",
        left: "",
        top: "",
        b_i: "",
        biaozhuHeight: 0,
        biaozhuWidth: 0,
        biaozhuTop: 0,
        biaozhuLeft: 0,
      };
    },
   
    methods: {
      getVuex() {
        console.log(this.$store.state.treeData);
      },
      commitVuex() {
        this.$store.commit("changeTreeData", { a: 1, b: 2 });
        
      },
      mouseOver2(e) {
        document.onmousedown = (e) => {
          let odiv = e.target; //获取目标元素
          //算出鼠标相对元素的位置
          let disX = e.clientX - odiv.offsetLeft;
          let disY = e.clientY - odiv.offsetTop;
          let left = e.clientX - disX;
          let top = e.clientY - disY;
   
          //绑定元素位置到positionX和positionY上面
          this.positionX = top;
          this.positionY = left;
          console.log(this.boxArry, this.dragsIndex);
          //移动当前元素
          this.boxArry[this.b_i].width = left;
          this.boxArry[this.b_i].height = top;
        };
      },
      drags(e) {
        console.log(e);
      },
      mouseMove11(e) {
        // console.log(e,index)
        let odiv = e.target; //获取目标元素
   
        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;
        let disY = e.clientY - odiv.offsetTop;
        // debugger;
        e.target.onmousemove = (e) => {
          //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          // console.log('aaaaaaaaaaaaa',e)
          let left = e.clientX - disX;
          let top = e.clientY - disY;
   
          //绑定元素位置到positionX和positionY上面
          this.positionX = top;
          this.positionY = left;
          // console.log(this.boxArry,this.dragsIndex)
          //移动当前元素
          this.boxArry[this.b_i].width = left;
          this.boxArry[this.b_i].height = top;
          e.target.onmouseup = (e) => {
            e.target.onmousemove = null;
   
            // document.onmouseup = null;
          };
        };
      },
      gai() {
        this.isTrue = !this.isTrue;
      },
      getOffect(e) {
        console.log(e);
        document.onmouseup = null;
        // this.left=e.offsetX
        //     this.top=e.offsetY
      },
      moveMouse(e) {
        let odiv = e.target; //获取目标元素
   
        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;
        let disY = e.clientY - odiv.offsetTop;
        console.log(disX, disY);
        if (this.isTrue) {
          // 拖动
          document.onmousemove = (e) => {
            //鼠标按下并移动的事件
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;
            let top = e.clientY - disY;
   
            //绑定元素位置到positionX和positionY上面
            this.positionX = top;
            this.positionY = left;
   
            //移动当前元素
            odiv.style.left = left + "px";
            odiv.style.top = top + "px";
          };
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        } else {
          // 添加div
   
          console.log(e);
          document.onmousemove = (e) => {
            //鼠标按下并移动的事件
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
   
            let left = disX - odiv.getBoundingClientRect().x;
            let top = disY - odiv.getBoundingClientRect().y;
   
            console.log(e.target.offsetLeft);
            this.width = (e.clientX - disX) / this.num;
            this.height = (e.clientY - disY) / this.num;
            this.biaozhuWidth = this.width;
            this.biaozhuHeight = this.height;
            this.biaozhuLeft = left;
            this.biaozhuTop = top;
            document.onmouseup = (e) => {
              let left = disX - odiv.getBoundingClientRect().x;
              let top = disY - odiv.getBoundingClientRect().y;
              this.width = (e.clientX - disX) / this.num;
              this.height = (e.clientY - disY) / this.num;
   
              console.log(e.target.getBoundingClientRect(), disX, disY);
              if (this.width > 5 && this.height > 5) {
                this.boxArry.push({
                  width: this.width,
                  height: this.height,
                  left: left,
                  top: top,
                });
              }
   
              this.biaozhuWidth = 0;
              this.biaozhuHeight = 0;
              this.biaozhuLeft = 0;
              this.biaozhuTop = 0;
              document.onmousemove = null;
              document.onmouseup = null;
            };
          };
        }
      },
      move(e) {
        let odiv = e.target; //获取目标元素
   
        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;
        let disY = e.clientY - odiv.offsetTop;
        document.onmousemove = (e) => {
          //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;
   
          //绑定元素位置到positionX和positionY上面
          this.positionX = top;
          this.positionY = left;
   
          //移动当前元素
          odiv.style.left = left + "px";
          odiv.style.top = top + "px";
        };
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },
   
      fangda() {
        this.num += 0.1;
      },
      suoxiao() {
        this.num -= 0.1;
      },
      tianjia() {
        this.boxArry.push({
          width: 100,
          height: 100,
          left: 20,
          top: 20,
        });
      },
      handelClick(i) {
        this.b_i = i;
        console.log(i);
      },
      dragstart(event, data) {
        // console.log('drag')
        // event.dataTransfer.setData('item', data)
      },
      dragend(event) {
        // event.dataTransfer.clearData()
      },
    },
    directives: {
      drag: function (el) {
        let dragBox = el; //获取当前元素
        dragBox.onmousedown = (e) => {
          //算出鼠标相对元素的位置
   
          let disX = e.clientX - dragBox.offsetLeft;
          let disY = e.clientY - dragBox.offsetTop;
          console.log(disX, disY);
          document.onmousemove = (e) => {
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;
            let top = e.clientY - disY;
            //移动当前元素
            dragBox.style.left = left + "px";
            dragBox.style.top = top + "px";
            console.log(left, top, "111111111");
          };
          document.onmouseup = (e) => {
            //鼠标弹起来的时候不再移动
            document.onmousemove = null;
            //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
            document.onmouseup = null;
          };
        };
      },
    },
   };
   </script>
   <style lang="less">
   #test {
    /deep/.el-dialog__body {
      padding: 10px 20px !important;
    }
    .content {
      width: 800px;
      height: 500px;
      background: red;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
   
      .drag_box {
        width: 150px;
        height: 90px;
        border: 1px solid #666;
        background-color: #ccc;
        /* 使用定位，脱离文档流 */
        position: relative;
        top: 100px;
        left: 100px;
        /* 鼠标移入变成拖拽手势 */
        cursor: move;
        z-index: 3000;
      }
      .b_border {
        border: 1px solid red !important;
      }
      .biaozhu {
        z-index: 9999999;
      }
      .r_b {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        background: red;
      }
      .r_b:hover {
        cursor: se-resize;
      }
    }
   }
   </style>
   